<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta
      name="format-detection"
      content="telephone=no,email=no,date=no,address=no"
    />
    <title>切换项目</title>
    <link rel="stylesheet" type="text/css" href="css/api.css" />
    <style>
      html,
      body {
        background-color: #f4f4f4;
      }
      #main {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-flow: column;
        flex-flow: column;
      }
      #header {
        position: relative;
        background-color: #1abc9c;
        border-bottom: 1px solid #e0e0e0;
      }
      .logo {
        position: absolute;
        left: 20px;
        bottom: 13px;
        height: 25px;
      }
      h1 {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        color: #fff;
        font-weight: normal;
        margin: 0 auto;
        text-align: center;
      }
      .xmlist {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
      }
      .xmlist ul li {
        height: 60px;
        background-color: #fff;
        margin-top: 10px;
        border-radius: 6px;
      }
      .xmlist ul li p {
        width: 20px;
        height: 20px;
        float: left;
        margin: 5px;
        background-color: #ff6656;
        text-align: center;
        border-radius: 12px;
        margin-top: 21px;
        color: #fff;
        line-height: 21px;
      }
      .xmlist ul li span {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <header id="header">
        <img
          class="logo"
          src="image/ic_back_u.png"
          tapmode
          onclick="api.closeWin()"
        />
        <h1 id="title">请选择项目</h1>
      </header>
    </div>
    <div class="xmlist" id="lst">
      <ul>
        <li v-for="(value, index) in pojlist" @click="openpro(index)">
          <p v-text="index+1"></p>
          <span v-text="value.projectName"></span>
        </li>
      </ul>
    </div>
  </body>
  <script type="text/javascript" src="script/api.js"></script>
  <script type="text/javascript" src="script/common.js"></script>
  <script type="text/javascript" src="script/vue.js"></script>
  <script type="text/javascript">
    apiready = function () {
      var $header = $api.dom("header");
      $api.fixIos7Bar($header);
      $api.fixStatusBar($header);
      var session = $api.getStorage("userSession");
      var app = new Vue({
        el: "#lst",
        data: {
          pojlist: session.data.enterpriseProjects,
        },
        created: function () {},
        methods: {
          openpro: function (index) {
            $api.setStorage(
              "selectpor",
              session.data.enterpriseProjects[index]
            );
            openDetail("index.html");
          },
        },
      });
    };
  </script>
</html>
